

	var _numDaysIn = function(month,year) {
		if (month==3 || month==5 || month==8 || month==10) return 30;
		else if ((month==1) && _leapYear(year)) return 29;
		else if (month==1) return 28;
		else return 31;
	};

	var _leapYear = function(year) {
		if (((year % 4 == 0) && year % 100 != 0) || year % 400 == 0) return true;
		else return false;
	};

	var _prevMonth = function(month) {
		if (month == 0) return 11;
		else return (month-1);
	};

	var _nextMonth = function(month) {
		if (month == 11) return 0;
		else return (month+1);
	};

	var _prevYearMonth = function(year) {
		if ((year % 100) == 1) return ((year-100)+11);
		else return (year-1);
	};

	var _nextYearMonth = function(year) {
		if ((year % 100) == 12) return ((year-11)+100);
		else return (year+1);
	};

	var _months = [ 'Januari', 'Februari', 'Mac', 'April', 'Mei', 'Jun', 'Julai', 'Ogos', 'September', 'Oktober', 'November', 'Disember' ];
	var _weekdays = [ 'Ahad', 'Isnin', 'Selasa', 'Rabu', 'Khamis', 'Jumaat', 'Sabtu' ];

	function leaveData(url,month,year){

		$.getJSON( url, { month: (month+1), year: year } ,function( json ) {
							 // sourcedata = jQuery.parseJSON(json);
							 _drawTable( url,month, year,json);
							});
	}

	function _drawTable( url, selMonth, selYear, data){
		
		var today = new Date();

		var currentDate = today.getDate();
		var currentDay = today.getDay();
		var currentMonth = today.getMonth();
		var currentYear = today.getFullYear();

		var prevMonth = _prevMonth(selMonth);
		var nextMonth = _nextMonth(selMonth);
		var prevYear = selYear - 1;
		var nextYear = selYear + 1;

		var totalDays = _numDaysIn(selMonth,selYear);

		var table = '';
		table = '<div class="row-fluid">';
		table += '<div class="span12 text-center">';
		table += '<a href="#" class="pull-left" onclick="leaveData('+"'"+url+"'"+','+selMonth+','+prevYear+')">'+prevYear+'&nbsp;<i class="icon-chevron-left"></i></a>&nbsp;';
		table += '<strong>'+selYear+'</strong>';
		table += '&nbsp;<a href="#" class="pull-right"  onclick="leaveData('+"'"+url+"'"+','+selMonth+','+nextYear+')"><i class="icon-chevron-right"></i>&nbsp;'+nextYear+'</a>';
		table += '</div>';
		table += '</div>';
		table += '<div class="row-fluid">';
		table += '<div class="span12 text-center">';
		table += '<a href="#" class="pull-left" onclick="leaveData('+"'"+url+"'"+','+prevMonth+','+selYear+')">'+_months[(prevMonth == 12)? 0:prevMonth] +'&nbsp;<i class="icon-chevron-left"></i></a>&nbsp;';
		table += '<strong>'+_months[selMonth]+'</strong>';
		table += '<a href="#" class="pull-right" onclick="leaveData('+"'"+url+"'"+','+nextMonth+','+selYear+')"><i class="icon-chevron-right"></i>&nbsp;'+_months[(nextMonth == 12)? 0:nextMonth] +'</a>';
		table += '</div>';
		table += '</div>';


		table += '<div class="row-fluid">';
		table += '<div class="span12 text-center">';
		table += "<table class='table table-bordered'>"

		table += '<thead>';
		table += '<tr>';

		for(x in _weekdays){

			table += '<td width="100px" style="background-color: #f5f5f5;"><div class="text-center"><strong>'+_weekdays[x]+'</strong></div></td>';
		}
		
		table += '</tr>';
		table += '</thead>';

		table += '<tbody>';

		var dayPerWeek = _weekdays.length;
		var weekPermonth = Math.floor( totalDays / dayPerWeek ) + 1 ;

		var dayOfTable = '' ;
		var todayClass = '';

		var begin = new Date(selYear, selMonth, 1);
		var dayIs = begin.getDay();
		
		if((dayIs > 4 && totalDays == 31) || dayIs > 5) weekPermonth = weekPermonth + 1;
		
		for (var i=1;i<(weekPermonth+1);i++){

			if(i==1){

				table += '<tr>';
				for (x=0;x<(dayPerWeek);x++){

					if(x == dayIs){
						dayOfTable = 1;
					}

					tdBg = 'onMouseOver="_changeBg(this)"';
					tdBg += 'style="line-height: 80px;';
					tdBg += (currentDate == dayOfTable && currentYear == selYear && currentMonth == selMonth)?'background-color: #dff0d8;':'';
					tdBg += (dayOfTable == '')?'background-color: #000;':'';
					tdBg += ((x == 0 || x == 6) && dayOfTable != '')?'background-color: #fbeed5;':'';
					tdBg += (dayOfTable > 0 && dayOfTable != '')?'cursor:pointer;':'';
					tdBg += '"';
					tdBg += (dayOfTable > 0 && dayOfTable != '')? ' id="'+dayOfTable+'_'+selMonth+'_'+selYear+'"' : '';

					act = 'onclick="addEvent('+selYear+','+ selMonth+','+dayOfTable+')"';

					table += '<td width="100px" '+tdBg+' >';
					// table += (dayOfTable > 0 && dayOfTable != '')?'<div '+act+' style="line-height: 20px;"class="pull-right"><i class="icon-plus"></i></div>':'';
					table += '<div style="line-height: 20px;" class="text-center"><strong>'+dayOfTable+'</strong></div>';
					table += '</td>';

					if(dayOfTable > 0 && dayOfTable != ''){
						dayOfTable++;
					}
				}
				table += '</tr>';

			}else if(i == weekPermonth){

				table += '<tr>';
				for (x=0;x<(dayPerWeek);x++){

					if(dayOfTable > totalDays){
						dayOfTable = '';
					}

					tdBg = 'onMouseOver="_changeBg(this)"';
					tdBg += 'style="line-height: 80px;';
					tdBg += (currentDate == dayOfTable && currentYear == selYear && currentMonth == selMonth)?'background-color: #dff0d8;':'';
					tdBg += (dayOfTable == '')?'background-color: #000;':'';
					tdBg += ((x == 0 || x == 6) && dayOfTable != '')?'background-color: #fbeed5;':'';
					tdBg += (dayOfTable > 0 && dayOfTable != '')?'cursor:pointer;':'';
					tdBg += '"';
					tdBg += (dayOfTable > 0 && dayOfTable != '')? ' id="'+dayOfTable+'_'+selMonth+'_'+selYear+'"' : '';

					act = 'onclick="addEvent('+selYear+','+ selMonth+','+dayOfTable+')"';

					table += '<td width="100px" '+tdBg+' >';
					// table += (dayOfTable > 0 && dayOfTable != '')?'<div '+act+' style="line-height: 20px;"class="pull-right"><i class="icon-plus"></i></div>':'';
					table += '<div style="line-height: 20px;" class="text-center"><strong>'+dayOfTable+'</strong></div>';
					table += '</td>';
					
					if(dayOfTable < (totalDays+1) && dayOfTable != ''){
						dayOfTable++;
					}
					
				}
				table += '</tr>';

			}else{

				table += '<tr>';
				for (x=0;x<(dayPerWeek);x++){

					tdBg = 'onMouseOver="_changeBg(this)"';
					tdBg += 'style="line-height: 80px;cursor:pointer;';
					tdBg += (currentDate == dayOfTable && currentYear == selYear && currentMonth == selMonth)?'background-color: #dff0d8;':'';
					tdBg += (dayOfTable == '')?'background-color: #d9edf7;':'';
					tdBg += ((x == 0 || x == 6) && dayOfTable != '')?'background-color: #fbeed5;':'';
					tdBg += '"';

					act = 'onclick="addEvent('+selYear+','+ selMonth+','+dayOfTable+')"';

					table += '<td width="100px" id="'+dayOfTable+'_'+selMonth+'_'+selYear+'" '+tdBg+' >';
					// table += '<div '+act+' style="line-height: 20px;"class="pull-right"><i class="icon-plus"></i></div>';
					table += '<div style="line-height: 20px;" class="text-center '+todayClass+'"><strong>'+dayOfTable+'</strong></div>';
					table += '</td>';
					dayOfTable++;
				}
				table += '</tr>';
			}
		}

		table += '</tbody>';

		table +='</table>';
		table += '</div>';
		table += '</div>';


		$('#calendar').html(table);

		for(x in data){

			var daily = data[x][selMonth+1][selYear];
			
			if(!jQuery.isEmptyObject(daily)){

				if(daily.hasOwnProperty("leave")){
					var cuti = '<div style="line-height:20px;font-size:10px;padding:3px;overflow:hidden" class="text-info">'+daily['leave']+'</div>';
					$('div #calendar table '+'#'+x+'_'+selMonth+'_'+selYear).append(cuti);				
				}

				var allEvent = daily['event'];
				var allLeave = daily['leave'];


				// trigger for schedules
				if(daily.hasOwnProperty("event")){
					$('div #calendar table '+'#'+x+'_'+selMonth+'_'+selYear).css('background-color',allEvent['wpjh']);
					var time ='<div style="line-height:20px;font-size:10px;padding:3px;overflow:hidden" class="mute">'+allEvent['wjwb']+'</div>';
					$('div #calendar table '+'#'+x+'_'+selMonth+'_'+selYear).append(time);
				}				
			}

		}

	}

	function _changeBg(element){

		$(element).hover(function(){
			$(this).css('opacity',0.6);
		},function(){
			$(this).css('opacity',1);
		});
	}